<template>
    <view class="product-list">
        <view class="title">晒单商品清单</view>
        <view class="img-list-wrapper">
            <img-list :list="selectedSunBathProducts" @open="handleOpenPopup" />
        </view>
        <product-popup ref="popup" :list="selectedSunBathProducts" />
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import imgList from "../common/img-list.vue"
import productPopup from "../common/product-popup.vue"

export default {
    components: {
        imgList,
        productPopup,
    },
	computed: {
	    ...mapState("sunbathing", ["selectedSunBathProducts"]),
	},
    data() {
        return {

        }
    },
    methods: {
        handleOpenPopup() {
            this.$refs.popup.openModal()
        },
    },
}
</script>

<style lang="scss">
.product-list {
    margin: 24rpx;
    background-color: $color-white;
    border-radius: 16rpx;

    .title {
        height: 88rpx;
        padding-left: 24rpx;
        line-height: 88rpx;
        font-size: 28rpx;
        font-weight: 700;
        border-bottom: 1rpx solid #f0f0f0;
    }

    .img-list-wrapper {
        padding: 24rpx;
        padding-top: 0;
    }
}
</style>
